<template>
    <div>
        <el-row class="login-container">
            <el-col :lg="16" :md="12" class="left">
                <div>
                    <div>欢迎光临</div>
                    <div>此站点是vue3+vite管理后台</div>
                </div>
            </el-col>
            <el-col :lg="8" :md="12" class="right">
                <h2 class="welcome">欢迎回来</h2>
                <div>
                    <span class="span"></span>
                    <span>账号密码登录</span>
                    <span class="span"></span>
                </div>
                <el-form ref="formRef" :model="form" class="w-[250px]" :rules="rules">
                    <el-form-item prop="username">
                        <el-input v-model="form.username" placeholder="请输入用户名">
                            <template #prefix>
                                <el-icon class="el-input__icon">
                                    <User />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" show-password v-model="form.password" placeholder="请输入密码">
                            <template #prefix>
                                <el-icon class="el-input__icon">
                                    <Lock />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button round color="#626aef" class="w-[250px]" type="primary" @click="onLogin"
                            :loading="loading">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import { ElNotification } from 'element-plus'
import { useRouter } from 'vue-router'
import { useLocalStorage } from '@vueuse/core'
import { login, getinfo } from '~/api/managerAPI.js'

const form = reactive({ username: '', password: '' })
const router = useRouter()
//加载
const loading = ref(false)

const rules = {
    username: [
        { required: true, message: '用户名不能为空', trigger: 'blur' },
        { max: 10, min: 5, message: '长度5~10位', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { max: 10, min: 5, message: '长度5~10位', trigger: 'blur' }
    ]
}

const formRef = ref(null)

const onLogin = () => {
    //通过回调进行验证
    formRef.value.validate((valid, fields) => {
        if (!valid) {
            return false
        }
        //请求开始时，加载等待动画
        loading.value = true
        //调用登录接口
        login(form.username, form.password)
            .then(res => {
                console.log(res)
                //提示成功
                ElNotification({
                    title: '登录提示',
                    message: '登录成功',
                    type: 'success'
                })
                //存储token
                useLocalStorage('admin-token', res.token)

                //获取用户信息
                getinfo().then(res2 => {
                    useLocalStorage('userinfo', res2)
                })

                //跳转到首页
                router.push('/')
            }).finally(() => {
                //请求结束时，结束等待动画
                loading.value = false
            })

        console.log('登录成功...')
    })
}

</script>

<style lang="scss" scoped>
.login-container {
    @apply min-h-screen bg-indigo-500;
}

.login-container .left {
    @apply flex items-center justify-center;
}

.left>div>div:first-child {
    @apply font-bold text-5xl text-light-50 mb-4;
}

.left>div>div:last-child {
    @apply text-gray-200 text-sm;
}

.login-container .right {
    @apply bg-light-50 flex items-center justify-center flex-col;
}

.welcome {
    @apply font-bold text-3xl text-gray-800;
}

.right>div {
    @apply flex items-center justify-center my-5 text-gray-300 space-x-2;
}

.span {
    @apply h-[1px] w-16 bg-gray-200;
}
</style>